﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Course Detail</title>

    <!-- Bootstrap -->
    <link rel='stylesheet' href='vendor/jquery-ui/jquery-ui.min.css'>
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">

    <!-- Font Icon -->
    <link rel="stylesheet" href="fonts/line-awesome/css/line-awesome.min.css">
    <link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="fonts/font-awesome-5/css/fontawesome-all.min.css">

    <!-- Revolution slider -->
    <link rel="stylesheet" href="vendor/revolution/settings.css">
    <link rel="stylesheet" href="vendor/revolution/layers.css">
    <link rel="stylesheet" href="vendor/revolution/navigation.css">
    <link rel="stylesheet" href="vendor/revolution/settings-source.css">

    <!-- Vendor CSS -->
    <link rel="stylesheet" href="vendor/css-hamburgers/dist/hamburgers.min.css">
    <link rel="stylesheet" href="vendor/slick/slick-theme.css">
    <link rel="stylesheet" href="vendor/slick/slick.css">
    <link rel="stylesheet" href="vendor/fancybox/dist/jquery.fancybox.min.css">
    <link rel='stylesheet' href='vendor/fullcalendar/fullcalendar.css' />
    <link rel='stylesheet' href='vendor/animate/animate.css' />

    <!-- Main CSS File -->
    <link href="css/style.css" rel="stylesheet">
    <link rel="shortcut icon" href="favicon.png">
</head>
<body>
    <!-- page load-->
    <div class="images-preloader">
	    <div id="preloader_1 spinner1" class="spinner1 rectangle-bounce">
	    	<div class="double-bounce1"></div>
	    	<div class="double-bounce2"></div>
	    </div>
	</div>

    <!-- Header page -->
    <header class="header">
        <div class="header-top hidden-tablet-landscape">
            <div class="container">
                <div class="header-top-content display-flex">
                    <div class="header-top-info">
                        <div class="header-socials">
                            <ul>
                                <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fab fa-youtube"></i></a></li>
                            </ul>
                        </div>
                        <a href="mailto:info@smartedu.com" class="email"><i class="far fa-envelope"></i>info@smartedu.com</a>
                        <a href="#" class="telephone"><i class="fas fa-mobile-alt"></i>+1 222-333-9999</a>
                    </div>
                    <div class="header-top-account">
                        <a href="#" class="signup"><i class="fas fa-edit"></i>Sign Up</a>
                        <a href="#" class="login">Sign In</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="header-bottom hidden-tablet-landscape" id="js-navbar-fixed">
            <div class="container">
                <div class="header-bottom">
                    <div class="header-bottom-content display-flex">
                        <div class="logo">
                            <a href="index.html">
                                <img src="images/logo.png" alt="SmartEdu">
                            </a>
                        </div>
                        <div class="menu-search display-flex">
                            <nav class="menu">
                                <div>
                                    <ul class="menu-primary">
                                        <li class="menu-item">
                                            <a href="index.html">Home</a>
                                            <ul class="sub-menu">
                                                <li class="menu-item"><a href="index.html">Home 1</a></li>
                                                <li class="menu-item"><a href="index2.html">Home 2</a></li>
                                                <li class="menu-item"><a href="index3.html">Home 3</a></li>
                                            </ul>
                                        </li>
                                        <li class="menu-item curent-menu-item">
                                            <a href="courses.html">Courses</a>
                                            <ul class="sub-menu">
                                                <li class="menu-item">
                                                    <a href="courses.html">Courses</a>
                                                    <ul class="sub-menu">
                                                        <li class="menu-item"><a href="single-course.html">Course Detail</a></li>
                                                    </ul>
                                                </li>
                                                <li class="menu-item"><a href="standardlist.html">Standard List</a></li>
                                            </ul>
                                        </li>
                                        <li class="menu-item">
                                            <a href="#">Pages</a>
                                            <ul class="sub-menu">
                                                <li class="menu-item"><a href="aboutus.html">About us</a></li>
                                                <li class="menu-item"><a href="gallery1.html">Gallery 1</a></li>
                                                <li class="menu-item"><a href="gallery2.html">Gallery 2</a></li>
                                                <li class="menu-item"><a href="404.html">404</a></li>
                                                <li class="menu-item"><a href="pricing.html">Pricing Table</a></li>
                                            </ul>
                                        </li>
                                        <li class="menu-item">
                                            <a href="events.html">Events</a>
                                            <ul class="sub-menu">
                                                <li class="menu-item"><a href="events.html">Events</a>
                                                    <ul class="sub-menu">
                                                        <li class="menu-item"><a href="single-event.html">Event Detail</a></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="menu-item">
                                            <a href="blog1.html">News</a>
                                            <ul class="sub-menu">
                                                <li class="menu-item"><a href="blog1.html">Blog 1</a>
                                                    <ul class="sub-menu">
                                                        <li class="menu-item"><a href="single.html">Blog detail</a></li>
                                                    </ul>
                                                </li>
                                                <li class="menu-item"><a href="blog2.html">Blog 2</a></li>
                                                <li class="menu-item"><a href="blog3.html">Blog 3</a>
                                            </ul>
                                            </li>
                                            <li class="menu-item">
                                                <a href="contact1.html">Contact</a>
                                                <ul class="sub-menu">
                                                    <li class="menu-item"><a href="contact1.html">Contact 1</a></li>
                                                    <li class="menu-item"><a href="contact2.html">Contact 2</a></li>
                                                    <li class="menu-item"><a href="contact3.html">Contact 3</a></li>
                                                </ul>
                                            </li>
                                    </ul>
                                </div>
                            </nav>
                            <div class="search-box">
                                <form method="POST">
                                    <input type="text" placeholder="Search..." id="search-box" name="s" value="">
                                    <div class="search-icon display-flex-center">
                                        <i class="la la-search"></i>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="hidden-tablet-landscape-up header-mobile">
            <div class="header-top-mobile">
                <div class="container-fluid">
                    <div class="logo">
                        <a href="index.html">
                            <img src="images/logo.png" alt="SmartEdu" />
                        </a>
                    </div>
                    <div class="search-box">
                        <form method="POST">
                            <input type="text" placeholder="Search..." name="s" value="">
                            <div class="search-icon font-color-white display-flex-center">
                                <i class="fa fa-search" aria-hidden="true"></i>
                            </div>
                        </form>
                    </div>
                    <button class="hamburger hamburger--spin hidden-tablet-landscape-up" id="toggle-icon">
                        <span class="hamburger-box">
                            <span class="hamburger-inner"></span>
                        </span>
                    </button>
                </div>
            </div>
            <div class="au-nav-mobile">
                <nav class="menu-mobile">
                    <div>
                        <ul class="au-navbar-menu">
                            <li class="menu-item">
                                <a href="index.html">Home</a>
                                <span class="arrow">
                                    <i></i>
                                </span>
                                <ul class="sub-menu">
                                    <li class="menu-item"><a href="index.html">Home 1</a></li>
                                    <li class="menu-item"><a href="index2.html">Home 2</a></li>
                                    <li class="menu-item"><a href="index3.html">Home 3</a></li>
                                </ul>
                            </li>
                            <li class="menu-item curent-menu-item">
                                <a href="courses.html">Courses</a>
                                <span class="arrow">
                                    <i></i>
                                </span>
                                <ul class="sub-menu">
                                    <li class="menu-item">
                                        <a href="courses.html">Courses</a>
                                        <ul class="sub-menu">
                                            <li class="menu-item"><a href="single-course.html">Course Detail</a></li>
                                        </ul>
                                    </li>
                                    <li class="menu-item"><a href="standardlist.html">Standard List</a></li>
                                </ul>
                            </li>
                            <li class="menu-item">
                                <a href="#">Pages</a>
                                <span class="arrow">
                                    <i></i>
                                </span>
                                <ul class="sub-menu">
                                    <li class="menu-item"><a href="aboutus.html">About us</a></li>
                                    <li class="menu-item"><a href="gallery1.html">Gallery 1</a></li>
                                    <li class="menu-item"><a href="gallery2.html">Gallery 2</a></li>
                                    <li class="menu-item"><a href="404.html">404</a></li>
                                    <li class="menu-item"><a href="pricing.html">Pricing Table</a></li>
                                </ul>
                            </li>
                            <li class="menu-item">
                                <a href="events.html">Events</a>
                                <span class="arrow">
                                    <i></i>
                                </span>
                                <ul class="sub-menu">
                                    <li class="menu-item"><a href="events.html">Events</a>
                                        <ul class="sub-menu">
                                            <li class="menu-item"><a href="single-event.html">Event Detail</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="menu-item">
                                <a href="blog1.html">News</a>
                                <span class="arrow">
                                    <i></i>
                                </span>
                                <ul class="sub-menu">
                                    <li class="menu-item"><a href="blog1.html">Blog 1</a>
                                        <ul class="sub-menu">
                                            <li class="menu-item"><a href="single.html">Blog detail</a></li>
                                        </ul>
                                    </li>
                                    <li class="menu-item"><a href="blog2.html">Blog 2</a></li>
                                    <li class="menu-item"><a href="blog3.html">Blog 3</a>
                                </ul>
                                </li>
                                <li class="menu-item">
                                    <a href="contact1.html">Contact</a>
                                    <span class="arrow">
                                    <i></i>
                                </span>
                                    <ul class="sub-menu">
                                        <li class="menu-item"><a href="contact1.html">Contact 1</a></li>
                                        <li class="menu-item"><a href="contact2.html">Contact 2</a></li>
                                        <li class="menu-item"><a href="contact3.html">Contact 3</a></li>
                                    </ul>
                                </li>
                        </ul>
                    </div>
                </nav>
            </div>
            <!-- <div class="clear"></div> -->
            <div class="header-top">
                <div class="container-fluid">
                    <div class="header-top-content display-flex">
                        <div class="header-top-info">
                            <a href="tel:04445552222" class="telephone"><span><i class="fas fa-mobile-alt"></i></span> +1 444-555-2222</a>
                            <a href="mailto:info@smartedu.com" class="email"><span><i class="far fa-envelope"></i></span> info@smartedu.com</a>
                        </div>
                        <div class="header-top-account">
                            <a href="#" class="login"><i class="fas fa-user"></i>Login</a>
                            <a href="#" class="signup"><i class="fas fa-edit"></i>Register</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </header>

    <main>
        <!-- Heading Page -->
        <section class="heading-page">
            <img src="images/bloggrid-heading-bg.jpg" alt="">
            <div class="container">
                <div class="heading-page-content">
                    <div class="au-page-title">
                        <h1>Courses Singer</h1>
                    </div>
                    <nav aria-label="breadcrumb">
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Courses Details</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </section>

        <section class="single-course section-padding-large">
            <div class="container">
                <div class="row">
                    <div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12 single-course-content">
                        <div class="single-title">
                            <h1>Content Marketing</h1>
                            <span class="price notfree">$24.00</span>
                        </div>
                        <div class="single-course-info">
                            <figure class="single-course-images">
                                <img src="images/single-course-full.jpg" alt="Content Marketing">
                            </figure>
                            <div class="course-teacher-cat display-flex">
                                <div class="teacher-cat">
                                    <ul class="display-flex">
                                        <li class="display-flex">
                                            <a href="#">
                                                <img src="images/home3-tutor-1.jpg" alt="Sofia Robinson">
                                            </a>
                                            <div class="teacher-cat-item">
                                                <span>Instructor:</span>
                                                <a href="#">Sofia Robinson</a>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="teacher-cat-item">
                                                <span>Caregories</span>
                                                <a href="#">Marketing</a>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="teacher-cat-item">
                                                <span>Reviews</span>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <a href="#" class="au-btn au-btn-hover">Buy This Courses</a>
                            </div>
                        </div>
                        <div class="single-course-tab">
                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="overview-tab" data-toggle="tab" href="#overview" role="tab" aria-controls="overview" aria-selected="true"><i class="fas fa-user"></i>Description</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="curriculum-tab" data-toggle="tab" href="#curriculum" role="tab" aria-controls="curriculum" aria-selected="false"><i class="fas fa-bookmark"></i>Curriculum</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="review-tab" data-toggle="tab" href="#review" role="tab" aria-controls="review" aria-selected="false"><i class="fas fa-star"></i>Review</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="instructor-tab" data-toggle="tab" href="#instructor" role="tab" aria-controls="instructor" aria-selected="false"><i class="fas fa-graduation-cap"></i>Instructor</a>
                                </li>
                            </ul>
                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
                                    <div class="course-overview">
                                        <div class="course-desc">
                                            <h4 class="course-tab-title">Courses Information</h4>
                                            <p class="course-desc-content">
                                                In massa tempor nec feugiat. Eu scelerisque felis imperdiet proin fermentum leo vel. Cras adipiscing eni egestas. Quam pellentesque nec nam aliquam sem et. Ante in nibh mauris cursus mattis. 
                                                Morbi quis commodo odio aenean sed adipiscing. Viverra maecenas accumsan lacus vel facilisis volutpat. Est ullamcorper eget nulla facilisi etiam. Id cursus metus aliquam eleifend mi. Metus dictum at tempor commodo. 
                                                Arcu cursus vitae congue mauris. Integer feugiat srisque varius morbi enim nunc faucibus. Eu scelerisque felis imperdiet proin fermentum leo vel orci. Magna ac placerat vestibulum lectus nec nam aliquam sem. Ante in nibh mauris cursus mattis.
                                            </p>
                                            <p class="course-desc-content">
                                                Arcu cursus vitae congue mauris. Integer feugiat scelerisque varius morbi enim nunc faucibus a. Eu scelerisque felis imperdiet proin fermentum leo vel orci. Magna ac placerat vestibulum lectus. Eget lorem dolor sed viverra
                                            </p>
                                        </div>
                                    </div>
                                    <!-- FQA -->
                                    <div class="fqa">
                                        <h4 class="title">FAQ</h4>
                                        <div class="fqa-content">
                                                <ul id="accordion">
                                                    <li class="card">
                                                        <div class="card-header" id="headingOne">
                                                            <div class="title" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" role="button">
                                                                What Is The Content Marketing?
                                                            </div>
                                                        </div>

                                                        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
                                                            <div class="card-body content">
                                                                Ornare suspendisse sed nisi lacus sed viverra tellus in hac. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet. Aliquet lectus proin nibh nisl condimentum id venenatis
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="card">
                                                        <div class="card-header" id="headingTwo">
                                                            <div class="title collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" role="button">
                                                                Who Is This Courses For?
                                                            </div>
                                                        </div>
                                                        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                                                            <div class="card-body content">
                                                                Ornare suspendisse sed nisi lacus sed viverra tellus in hac. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet. Aliquet lectus proin nibh nisl condimentum id venenatis
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="card">
                                                        <div class="card-header" id="headingThree">
                                                            <div class="title collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" role="button">
                                                                Who can I contact for more information about a particular class?
                                                            </div>
                                                        </div>
                                                        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                                                            <div class="card-body content">
                                                                Ornare suspendisse sed nisi lacus sed viverra tellus in hac. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet. Aliquet lectus proin nibh nisl condimentum id venenatis
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="card active">
                                                        <div class="card-header" id="headingFour">
                                                            <div class="title collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour" role="button">
                                                                Terms and Conditions.
                                                            </div>
                                                        </div>
                                                        <div id="collapseFour" class="collapse show" aria-labelledby="headingFour" data-parent="#accordion">
                                                            <div class="card-body content">
                                                                Ornare suspendisse sed nisi lacus sed viverra tellus in hac. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet. Aliquet lectus proin nibh nisl condimentum id venenatis
                                                            </div>
                                                        </div>
                                                    </li>
                                                </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="curriculum" role="tabpanel" aria-labelledby="curriculum-tab">
                                    <ul id="curriculum-content" class="curriculum-content">
                                        <li class="card active">
                                            <div class="card-header" id="headingcurriculumOne">
                                                <div class="title" data-toggle="collapse" data-target="#curriculumOne" aria-expanded="true" aria-controls="curriculumOne" role="button">
                                                    Section 1: Getting Started
                                                </div>
                                                <span>0/5</span>
                                            </div>

                                            <div id="curriculumOne" class="collapse show" aria-labelledby="headingcurriculumOne" data-parent="#curriculum-content">
                                                <div class="card-body content">
                                                    <ul>
                                                        <li class="display-flex">
                                                            <a href="#">
                                                                <span>
                                                                    <i class="fas fa-play-circle"></i>Welcome To Course Content Marketing! <span class="price">Free</span>
                                                                </span>
                                                            </a>
                                                            <span class="lesson-time"><i class="far fa-clock"></i>05:20</span>
                                                        </li>
                                                        <li class="display-flex">
                                                            <a href="#">
                                                                <span>
                                                                    <i class="fas fa-play-circle"></i>What is Content Writing?
                                                                </span>
                                                            </a>
                                                            <span class="lesson-time"><i class="far fa-clock"></i>02:00</span>
                                                        </li>
                                                        <li class="display-flex">
                                                            <a href="#">
                                                                <span>
                                                                    <i class="fas fa-play-circle"></i>What Does it Take to Become a Content Writer?
                                                                </span>
                                                            </a>
                                                            <span class="lesson-time"><i class="far fa-clock"></i>04:10</span>
                                                        </li>
                                                        <li class="display-flex">
                                                            <a href="#">
                                                                <span>
                                                                    <i class="far fa-file"></i>Brainstorming Checklist
                                                                </span>
                                                            </a>
                                                            <span class="lesson-time"><i class="far fa-clock"></i>03:20</span>
                                                        </li>
                                                        <li class="display-flex">
                                                            <a href="#">
                                                                <span>
                                                                    <i class="fas fa-play-circle"></i>Understanding Your Audience
                                                                </span>
                                                            </a>
                                                            <span class="lesson-time"><i class="far fa-clock"></i>06:30</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="card">
                                            <div class="card-header" id="headingcurriculumTwo">
                                                <div class="title" data-toggle="collapse" data-target="#curriculumTwo" aria-expanded="true" aria-controls="curriculumTwo" role="button">
                                                    Section 2: Creative Content Ideas 
                                                </div>
                                                <span>0/8</span>
                                            </div>

                                            <div id="curriculumTwo" class="collapse show" aria-labelledby="headingcurriculumTwo" data-parent="#curriculum-content">
                                                <div class="card-body content">
                                                    <ul>
                                                        <li class="display-flex">
                                                            <a href="#">
                                                                <span>
                                                                    <i class="far fa-file"></i>Powerful Keyword Research Tools
                                                                </span>
                                                            </a>
                                                            <span class="lesson-time"><i class="far fa-clock"></i>02:00</span>
                                                        </li>
                                                        <li class="display-flex">
                                                            <a href="#">
                                                                <span>
                                                                    <i class="fas fa-play-circle"></i>How to Create Valuable Content?
                                                                </span>
                                                            </a>
                                                            <span class="lesson-time"><i class="far fa-clock"></i>04:00</span>
                                                        </li>
                                                        <li class="display-flex">
                                                            <a href="#">
                                                                <span>
                                                                    <i class="fas fa-play-circle"></i>Examples of How to Use Tone in Your Writing
                                                                </span>
                                                            </a>
                                                            <span class="lesson-time"><i class="far fa-clock"></i>06:25</span>
                                                        </li>
                                                        <li class="display-flex">
                                                            <a href="#">
                                                                <span>
                                                                    <i class="far fa-file"></i>How to Improve Flow in Your Content
                                                                </span>
                                                            </a>
                                                            <span class="lesson-time"><i class="far fa-clock"></i>04:20</span>
                                                        </li>
                                                        <li class="display-flex">
                                                            <a href="#">
                                                                <span>
                                                                    <i class="fas fa-play-circle"></i>Webmaster Guidelines
                                                                </span>
                                                            </a>
                                                            <span class="lesson-time"><i class="far fa-clock"></i>05:40</span>
                                                        </li>
                                                        <li class="display-flex">
                                                            <a href="#">
                                                                <span>
                                                                    <i class="fas fa-play-circle"></i>Generalist vs. Specialist
                                                                </span>
                                                            </a>
                                                            <span class="lesson-time"><i class="far fa-clock"></i>04:00</span>
                                                        </li>
                                                        <li class="display-flex">
                                                            <a href="#">
                                                                <span>
                                                                    <i class="far fa-file"></i>Proximity Research
                                                                </span>
                                                            </a>
                                                            <span class="lesson-time"><i class="far fa-clock"></i>02:15</span>
                                                        </li>
                                                        <li class="display-flex">
                                                            <a href="#">
                                                                <span>
                                                                    <i class="fas fa-puzzle-piece"></i>The Course Quiz
                                                                </span>
                                                            </a>
                                                            <span class="lesson-time"><i class="far fa-clock"></i>6 Question</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
                                    <div class="review-content">
                                        <div class="average-rating">
                                            <span class="total-rating">5</span>
                                            <div class="rating-star">
                                                <span class="star-rate rated"><i class="fas fa-star"></i></span>
                                                <span class="star-rate rated"><i class="fas fa-star"></i></span>
                                                <span class="star-rate rated"><i class="fas fa-star"></i></span>
                                                <span class="star-rate rated"><i class="fas fa-star"></i></span>
                                                <span class="star-rate rated"><i class="fas fa-star"></i></span>
                                            </div>
                                            <p class="desc">Average Rating</p>
                                        </div>
                                        <div class="rating-breakdown js-waypoint">
                                            <div class="progress-bar">
                                                <div class="progress-box">
                                                    <div class="au-progress au-progress-2">
                                                        <div class="au-progress-bar" role="progressbar" data-transitiongoal="100">
                                                            <span class="au-progress-star">5 Stars</span>
                                                            <span class="au-progress-total"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="progress-box">
                                                    <div class="au-progress au-progress-2">
                                                        <div class="au-progress-bar" role="progressbar" data-transitiongoal="0">
                                                            <span class="au-progress-star">3 Stars</span>
                                                            <span class="au-progress-total">0</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="progress-box">
                                                    <div class="au-progress au-progress-2">
                                                        <div class="au-progress-bar" role="progressbar" data-transitiongoal="0">
                                                            <span class="au-progress-star">3 Stars</span>
                                                            <span class="au-progress-total"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="progress-box">
                                                    <div class="au-progress au-progress-2">
                                                        <div class="au-progress-bar" role="progressbar" data-transitiongoal="0">
                                                            <span class="au-progress-star">2 Stars</span>
                                                            <span class="au-progress-total"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="progress-box">
                                                    <div class="au-progress au-progress-2">
                                                        <div class="au-progress-bar" role="progressbar" data-transitiongoal="0">
                                                            <span class="au-progress-star">1 Stars</span>
                                                            <span class="au-progress-total"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="review-comments">
                                        <h3 class="title">
                                            Our Students Said:
                                        </h3>
                                        <div class="media">
                                            <a class="mr-20" href="#">
                                                <img src="images/testimonials-6.jpg" alt="Generic placeholder image">
                                            </a>
                                            <div class="media-body">
                                                <div class="info">
                                                    <div class="title-desc">
                                                        <h5 class="mt-0 title">
                                                            Lauren Goodwin  -  <span> Great Course</span>
                                                        </h5>
                                                        <div class="rating-star">
                                                            <span class="star-rate rated"><i class="fas fa-star"></i></span>
                                                            <span class="star-rate rated"><i class="fas fa-star"></i></span>
                                                            <span class="star-rate rated"><i class="fas fa-star"></i></span>
                                                            <span class="star-rate rated"><i class="fas fa-star"></i></span>
                                                            <span class="star-rate rated"><i class="fas fa-star"></i></span>
                                                        </div>
                                                        <p class="desc">
                                                            Lulla pharetra diam sit amet. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidu ornare. At imperdiet dui accumsan sit amet nulla facilisi. Dui vivamus arcu felis biben.
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="media">
                                            <a class="mr-20" href="#">
                                                <img src="images/home3-tutor-5.jpg" alt="Generic placeholder image">
                                            </a>
                                            <div class="media-body">
                                                <div class="info">
                                                    <div class="title-desc">
                                                        <h5 class="mt-0 title">
                                                            Monica Morgan  -  <span>Customer Support  </span>
                                                        </h5>
                                                        <div class="rating-star">
                                                            <span class="star-rate rated"><i class="fas fa-star"></i></span>
                                                            <span class="star-rate rated"><i class="fas fa-star"></i></span>
                                                            <span class="star-rate rated"><i class="fas fa-star"></i></span>
                                                            <span class="star-rate rated"><i class="fas fa-star"></i></span>
                                                            <span class="star-rate rated"><i class="fas fa-star"></i></span>
                                                        </div>
                                                        <p class="desc">
                                                            Praesent tristique magna sit amet purus gravida quis. Enim neque volutpat ac tincidunt. Eget alique nibh praesent tristique magna sit amet purus.
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="instructor" role="tabpanel" aria-labelledby="instructor-tab">
                                    <div class="instructor-content">
                                        <div class="instructor-thumb">
                                            <a href="#">
                                                <img src="images/intructor-1.jpg" alt="Sofia Robinson">
                                            </a>
                                        </div>
                                        <div class="instructor-info">
                                            <h4 class="title">
                                                <a href="#">Sofia Robinson</a>
                                            </h4>
                                            <div class="categories">
                                                <a href="#">Marketing </a>
                                                <a href="#">& Language</a>
                                            </div>
                                            <p class="desc">
                                                Ullamcorper eget nulla facilisi etiam dignissim diam. Vitae ultri integer malesuada nunc vel risus. Cursus mattis molestie a iaculis at. Augue eget arcu dictum varius. Vulputate ut pharetra sit amet aliquam id diam maecenas hendrerit dolor.
                                            </p>
                                            <div class="socials">
                                                <ul>
                                                    <li>
                                                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                                                    </li>
                                                    <li>
                                                        <a href="#"><i class="fab fa-google-plus-g"></i></a>
                                                    </li>
                                                    <li>
                                                        <a href="#"><i class="fab fa-twitter"></i></a>
                                                    </li>
                                                    <li>
                                                        <a href="#"><i class="fab fa-youtube"></i></a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12">
                        <div class="right-sidebar">
                            <div class="widget-featured-course">
                                <div class="widget-title">
                                    <h2>Featured Course</h2>
                                </div>
                                <ul>
                                    <li class="display-flex">
                                        <span><i class="fas fa-clock"></i>Duration</span>
                                        <span>2 Section</span>
                                    </li>
                                    <li class="display-flex">
                                        <span><i class="fas fa-book"></i>Lessons</span>
                                        <span>08</span>
                                    </li>
                                    <li class="display-flex">
                                        <span><i class="fas fa-signal"></i>Levels</span>
                                        <span>Beginner</span>
                                    </li>
                                    <li class="display-flex">
                                        <span><i class="fas fa-puzzle-piece"></i>Quizzes</span>
                                        <span>01</span>
                                    </li>
                                    <li class="display-flex">
                                        <span><i class="fas fa-users"></i>Students</span>
                                        <span>42</span>
                                    </li>
                                    <li class="display-flex">
                                        <span><i class="fas fa-check-square"></i>Assessments</span>
                                        <span>Yes</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="widget_lastest_entries">
                                <div class="widget-title">
                                    <h2>Recent Courses</h2>
                                </div>
                                <ul>
                                    <li>
                                        <figure>
                                            <a href="#"><img src="images/popular-courses-1.jpg" alt="Web Design For Usability"></a>
                                        </figure>
                                        <div class="info">
                                            <h3 class="title">
                                                <a href="#">Web Design For Usability</a>
                                            </h3>
                                            <span class="price free">Free</span>
                                        </div>
                                    </li>
                                    <li>
                                        <figure>
                                            <a href="#"><img src="images/popular-courses-2.jpg" alt="Essential Blogging Tools"></a>
                                        </figure>
                                        <div class="info">
                                            <h3 class="title">
                                                <a href="#">Essential Blogging Tools</a>
                                            </h3>
                                            <span class="price free">Free</span>
                                        </div>
                                    </li>
                                    <li>
                                        <figure>
                                            <a href="#"><img src="images/popular-courses-3.jpg" alt="Advanced: UI Design"></a>
                                        </figure>
                                        <div class="info">
                                            <h3 class="title">
                                                <a href="#">Advanced: UI Design</a>
                                            </h3>
                                            <span class="price notfree">$65.00</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>

                            <div class="banner">
                                <img src="images/sidebar-banner.jpg" alt="">
                                <div class="banner-content position-center">
                                    <h5 class="title">
                                        Get Free Online Courses!
                                    </h5>
                                    <a href="#" class="au-btn au-btn-hover">Get It Now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer page -->
    <footer class="footer">
        <div class="footer-top">
            <div class="container">
                <div class="footer-top-content">
                    <div class="row">
                        <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 footer-info">
                            <div class="footer-logo">
                                <a href="index.html"><img src="images/logo-white.png" alt="SmartEdu"></a>
                            </div>
                            <p class="footer-intro">
                                Proin libero nunc conseq interdum varius sit amet. Metus ali elei mi in nulla posuere. Tortor preti viverra suspendisse potenti nul ac.
                            </p>
                            <div class="socials">
                                <ul>
                                    <li>
                                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fab fa-google-plus-g"></i></a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fab fa-twitter"></i></a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fab fa-youtube"></i></a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fab fa-instagram"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 footer-menu">
                            <div class="footer-title">
                                <h4>Link Useful</h4>
                            </div>
                            <div class="footer-link-menu">
                                <ul>
                                    <li><a href="#"><i class="la la-angle-right"></i>Courses</a></li>
                                    <li><a href=""><i class="la la-angle-right"></i>Teacher</a></li>
                                    <li><a href=""><i class="la la-angle-right"></i>Graduation</a></li>
                                    <li><a href="#"><i class="la la-angle-right"></i>International</a></li>
                                    <li><a href="#"><i class="la la-angle-right"></i>Support</a></li>
                                </ul>
                                <ul>
                                    <li><a href="#"><i class="la la-angle-right"></i>About Us</a></li>
                                    <li><a href="#"><i class="la la-angle-right"></i>Partner</a></li>
                                    <li><a href="#"><i class="la la-angle-right"></i>Blog Post</a></li>
                                    <li><a href="#"><i class="la la-angle-right"></i>Events</a></li>
                                    <li><a href="#"><i class="la la-angle-right"></i>Contact</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 footer-gallery">
                            <div class="footer-title">
                                <h4>Gallery</h4>
                            </div>
                            <div class="footer-gallery-content">
                                <figure>
                                    <a href="images/footer-gallery-1.jpg" class="grouped_elements" data-fancybox="gallery">
                                        <img src="images/footer-gallery-1.jpg" alt="">
                                    </a>
                                </figure>
                                <figure>
                                    <a href="images/footer-gallery-2.jpg" class="grouped_elements" data-fancybox="gallery">
                                        <img src="images/footer-gallery-2.jpg" alt="">
                                    </a>
                                </figure>
                                <figure>
                                    <a href="images/footer-gallery-3.jpg" class="grouped_elements" data-fancybox="gallery">
                                        <img src="images/footer-gallery-3.jpg" alt="">
                                    </a>
                                </figure>
                                <figure>
                                    <a href="images/footer-gallery-4.jpg" class="grouped_elements" data-fancybox="gallery">
                                        <img src="images/footer-gallery-4.jpg" alt="">
                                    </a>
                                </figure>
                                <figure>
                                    <a href="images/footer-gallery-5.jpg" class="grouped_elements" data-fancybox="gallery">
                                        <img src="images/footer-gallery-5.jpg" alt="">
                                    </a>
                                </figure>
                                <figure>
                                    <a href="images/footer-gallery-6.jpg" class="grouped_elements" data-fancybox="gallery">
                                        <img src="images/footer-gallery-6.jpg" alt="">
                                    </a>
                                </figure>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 footer-contact">
                            <div class="footer-title">
                                <h4>Infomation</h4>
                            </div>
                            <ul>
                                <li>
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>SmartEdu, 20th St, New York, NY 10003</span>
                                </li>
                                <li class="footer-phone">
                                    <i class="fas fa-mobile-alt"></i>
                                    <span>+1 333-444-5555</span>
                                </li>
                                <li class="footer-fax">
                                    <i class="fas fa-fax"></i>
                                    <span>+1 333-444-5555</span>
                                </li>
                                <li>
                                    <i class="far fa-envelope"></i>
                                    <span>info@smartedu.com</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="container">
                <div class="footer-bottom-content">
                    <p class="copyright">Copyright @ 2019 <span>SmartEdu</span>. <a class="au-btn-buy" href="http://bootstrapmb.com">Get The Template</a></p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Back to top -->
    <div id="back-to-top">
        <i class="fa fa-angle-up"></i>
    </div>

    <!-- JS -->

    <!-- Jquery and Boostrap library -->
    <script src="vendor/bootstrap/js/popper.min.js"></script>
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Other js -->
    <script src="http://ditu.google.cn/maps/api/js?key=AIzaSyAEmXgQ65zpsjsEAfNPP9mBAz-5zjnIZBw"></script>
    <script src="js/theme-map.js"></script>
    <script src="js/jquery.countdown.min.js"></script>
    <script src="js/masonry.pkgd.min.js"></script>
    <script src="js/imagesloaded.pkgd.js"></script>
    <script src="js/isotope-docs.min.js"></script>

    <!-- Vendor JS -->
    <script src="vendor/slick/slick.min.js"></script>
    <script src='vendor/jquery-ui/jquery-ui.min.js'></script>
    <script src="vendor/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
    <script src="vendor/waypoints/lib/jquery.waypoints.min.js"></script>
    <script src="vendor/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="vendor/sweetalert/sweetalert.min.js"></script>
    <script src="vendor/fancybox/dist/jquery.fancybox.min.js"></script>
    <script src='vendor/fullcalendar/lib/moment.min.js'></script>
    <script src='vendor/fullcalendar/fullcalendar.min.js'></script>
    <script src='vendor/wow/dist/wow.min.js'></script>

    <!-- REVOLUTION JS FILES -->
    <script src="vendor/revolution/js/jquery.themepunch.tools.min.js"></script>
    <script src="vendor/revolution/js/jquery.themepunch.revolution.min.js"></script>

    <!-- Form JS -->
    <script src="js/validate-form.js"></script>
    <script src="js/config-contact.js"></script>

    <!-- Main JS -->
    <script src="js/main.js"></script> 
</body>
</html>